<template>
    <div class="container">
        <div v-if="show==0">
            <el-card class="card1">
            <!-- //教学区 -->
             <div class="header">
                <div class="headerleft">教学区</div>
                <div class="headerRight" @click="moreEdu">
                    更多
                </div>
             </div>
             <div class="EdusCard">
                <div class="leftCard">
                    <div class="picture">
                     <el-image :src="this.dataList1[0].picture" :preview-src-list="[this.dataList1[0].picture]" style="width:95%; height: 100%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList1[0].introduce" @click="getDetail(dataList1[0].id)">
                    </div>
                </div>
                <div class="rightCard">
                    <div class="picture">
                     <el-image :src="this.dataList1[1].picture" :preview-src-list="[this.dataList1[1].picture]" style="width:95%; height: 50%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList1[1].introduce" @click="getDetail(dataList1[1].id)">
                    </div>
                </div>
             </div>
        </el-card>
        <el-card class="card2">
            <!-- //生活区 -->
            <div class="header">
                <div class="headerleft">生活区</div>
                <div class="headerRight" @click="moreLiving">
                    更多
                </div>
            </div>
            <div class="livingCard">
                <div class="leftCard">
                    <div class="picture">
                     <el-image :src="this.dataList2[0].picture" :preview-src-list="[this.dataList2[0].picture]" style="width:95%; height: 80%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList2[0].introduce" @click="getDetail(dataList2[0].id)">
                    </div>
                </div>
                <div class="centerCard">
                    <div class="picture">
                     <el-image :src="this.dataList2[1].picture" :preview-src-list="[this.dataList2[1].picture]" style="width:95%; height: 80%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList2[1].introduce" @click="getDetail(dataList2[1].id)">
                    </div>
                </div>
                <div class="rightCard">
                    <div class="picture">
                     <el-image :src="this.dataList2[2].picture" :preview-src-list="[this.dataList2[2].picture]" style="width:95%; height: 80%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList2[2].introduce" @click="getDetail(dataList2[2].id)">
                    </div>
                </div>
            </div>
        </el-card>
        <el-card class="card3">
            <!-- //娱乐区 -->
            <div class="header">
                <div class="headerleft">娱乐区</div>
                <div class="headerRight" @click="moreAmusement">
                    更多
                </div>
            </div>
            <div class="amusementCard">
                <div class="leftCard">
                    <div class="picture">
                     <el-image :src="this.dataList3[0].picture" :preview-src-list="[this.dataList3[0].picture]" style="width:95%; height: 80%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList3[0].introduce" @click="getDetail(dataList3[0].id)">
                    </div>
                </div>
                <div class="rightCard">
                    <div class="picture">
                     <el-image :src="this.dataList3[1].picture" :preview-src-list="[this.dataList3[1].picture]" style="width:95%; height: 80%" ></el-image>
                    </div>
                    <div class="introduce" v-html="this.dataList2[1].introduce" @click="getDetail(dataList2[1].id)">
                    </div>
                </div>
             </div>
        </el-card>
        </div>
        <div v-if="show==1">
            <!-- 更多 -->
            <el-card class="moreCard">
                <div class="moreCardHeader">
                    <!-- <div class="moreHeaderLeft"> -->
                        <div  @click="show=0" style="cursor: pointer;font-size: 14px; color: gray;">
                        <i class="el-icon-back" >返回</i>
                        </div>
                        <div style="color: gray;">{{type==1?'教学区':type==2?'生活区':'娱乐区'}}</div>
                    <!-- </div> -->
                    <div class="moreHeaderRight" @click="addCampusView">
                        <i class="el-icon-plus">新增</i>
                    </div>
                </div>
                <div class="moreCardBody">
                    <div class="row" v-for="(items, rowIndex) in this.dataList" :key="rowIndex">  
                    <div class="item" v-for="item in items" :key="item.id">  
                            <div class="picture">
                            <el-image :src="item.picture" :preview-src-list="[item.picture]" style="width:100%; height: 100%" ></el-image>
                            </div>
                            <div class="introduce" v-html="item.introduce" @click="getDetail(item.id)"></div>
                    </div>  
                    </div>  
                </div>
            </el-card>
        </div>
        <div v-if="show==2">
            <el-card style="padding-bottom: 20px;">
                <div slot="header">新增地点</div>
                <div>
                    <el-form :model="addForm" label-width="120px" :rules="addRules" ref="addFormRef">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="addForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="地点" prop="location">
                            <el-input v-model="addForm.location"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" prop="picture">
                            <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9000/files/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="addForm.picture" :src="addForm.picture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        </el-form-item>
                        <el-form-item label="添加到知识库"> 
                            <el-upload
                            class="upload-demo"
                            action="http://localhost:9000/knowledgeBase/uploadKnowledgeBase"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="介绍" prop="introduce">
                            <QuillEditor :content="addForm.introduce" @contentChange="getPrivacyAgreement"></QuillEditor>
                       </el-form-item>
                    </el-form>
                </div>
                <div style="float: right;">
                    <el-button type="info" @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="SureAdd">发布</el-button>
                </div>
            </el-card>
        </div>
        <div v-if="show==3">
            修啊给
        </div>
        <div v-if="show==4">
            <div @click="backToMore(detailForm.type)" style="cursor: pointer;font-size: 14px; color: gray;">
                <i class="el-icon-back" >返回</i>
            </div>
            <div class="detailName">{{ detailForm.name }}</div>
            <div v-html="detailForm.introduce" class="detailConten"></div>
            <div>
             <img :src="detailForm.picture" alt="">
            </div>
        </div>
    </div>
</template>
<script>
import QuillEditor from '@/components/QuillEditor.vue';
export default {
    components:{QuillEditor},
    data(){
        return {
            queryInfo:{},
            dataList:[],
            dataList1:[],
            dataList2:[],
            dataList3:[],
            total:0,
            show:0,//0s首页，1全部， 2新增，3，修改, 4修改
            addForm:{},
            type:1,
            detailForm:{},
            addRules:{  
                name:[{required:true,message:'名称不能为空',trigger:'blur'}],
                picture:[{required:true,message:'图片不能为空',trigger:'blur'}],
                location:[{required:true,message:'地址不能为空',trigger:'blur'}],
                introduce:[{required:true,message:'介绍不能为空',trigger:'blur'}]
            }
        }
    },
    methods:{
        async getSomeCampusViews(){
            const queryInfo1 = {
                pageNum:1,
                pageSize:2,
                type:1
            }
            const queryInfo2 = {
                pageNum:1,
                pageSize:3,
                type:2
            }
            const queryInfo3 = {
                pageNum:1,
                pageSize:2,
                type:3
            }
            const {data:res1} = await this.$http.post("/getAllCampusViewList",queryInfo1 );
            if(res1.code === 200){
                this.dataList1 = res1.data;
            }
            const {data:res2} = await this.$http.post("/getAllCampusViewList",queryInfo2 );
            if(res2.code === 200){
                this.dataList2 = res2.data;
            }
            const {data:res3} = await this.$http.post("/getAllCampusViewList",queryInfo3 );
            if(res3.code === 200){
                this.dataList3 = res3.data;
            }
            
        },
        chunkedData(dataList) {  
            // 将数据分割成每行chunkSize个数据项的数组  
            let result = [];  
            for (let i = 0; i < this.dataList.length; i += 2) {  
                let chunk = this.dataList.slice(i, i + 2);  
                result.push(chunk);  
            }  
            return result;  
        },
        //获取某种类型通知新
        async getCampusViews(){
            const {data:res} = await this.$http.post("/getAllCampusViewList",this.queryInfo );
            if(res.code === 200){
                this.dataList = res.data;
                this.total = res.count;
            }
            this.dataList = this.chunkedData(this.dataList)
        },
        getPrivacyAgreement(val){
            if(this.show === 2){
            this.addForm.introduce = val;
            }else if(this.show === 3){
                this.editForm.introduce = val;
            }
        },
        moreEdu(){
            this.type = 1;
            this.show = 1
            this.queryInfo.type = this.type
            this.getCampusViews()
        },
        moreLiving(){
            this.type = 2;
            this.show = 1
            this.queryInfo.type = this.type
            this.getCampusViews()
        },
        moreAmusement(){
            this.type = 3;
            this.show = 1
            this.queryInfo.type = this.type
            this.getCampusViews()
        },
        addCampusView(){
            this.show = 2
        },
        handleAvatarSuccess(res){
            this.addForm.picture = res;        
        },
        SureAdd(){
            this.$refs.addFormRef.validate(async valid=>{
                this.addForm.type = this.type
                const {data:res} = await this.$http.post('/addCampusView',this.addForm)
                if(res.code === 200){
                    this.$message.success(res.message);
                }else{
                    this.$message.error(res.message);
                }
                this.show = 1;
                this.queryInfo.type = this.type
                this.getCampusViews()
                this.getSomeCampusViews()
                this.addForm = {}
            })
        },
        cancelAdd(){
            this.show = 1;
            this.addForm = {}

        },
        async getDetail(id){
            this.show = 4
            const {data:res} = await this.$http.get('/getCampusView?id='+id);
            if(res.code === 200){
                this.detailForm = res.data;
            } else {
                this.$message.error(res.message);
            }
        },
        async backToMore(type){
            this.show = 1
            this.queryInfo.type = this.type
            this.getCampusViews()
        }
    },
    mounted(){
        this.getSomeCampusViews();
    }
}
</script>
<style lang="less" scoped>
.container{
    display: block;
    .card1{
        height: 50vh;
        margin-bottom: 10px;
        .header{
            display: flex;
            justify-content: space-between;
            .headerleft{
            color: rgb(172, 171, 170);
            font-size: 20px;
            }
            .headerRight{
            color: rgb(125, 160, 230);
            font-size: 16px;
            cursor: pointer;
            }
        }
        .EdusCard{
            display: flex;
            justify-content: space-between;
            .leftCard{
                width: 49%;
                height: 40vh;
                overflow-y: hidden;
                display: flex;
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                    cursor: pointer;
                }
            }
            .rightCard{
                width: 49%;
                overflow-y: hidden;
                display: flex;
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                }
            }
        }

    }
    .card2{
        height: 28vh;
        margin-bottom: 10px;
        .header{
            display: flex;
            justify-content: space-between;
            .headerleft{
            color: rgb(172, 171, 170);
            font-size: 20px;
            }
            .headerRight{
            color: rgb(125, 160, 230);
            font-size: 16px;
            cursor: pointer;
            }
        }
        .livingCard{
            display: flex;
            justify-content: space-between;
            .leftCard{
                width: 32%;
                height: 20vh;
                display: flex;
                overflow-y: hidden;
                
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                    cursor: pointer;

                }
            }
            .centerCard{
                width: 32%;
                
                display: flex;
                overflow-y: hidden;
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                    cursor: pointer;

                }
            }
            .rightCard{
                width: 32%;
                display: flex;
                overflow-y: hidden;
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                    cursor: pointer;

                }
            }
        }
    }
    .card3{
        height: 27vh;
        .header{
            display: flex;
            justify-content: space-between;
            .headerleft{
            color: rgb(172, 171, 170);
            font-size: 20px;
            }
            .headerRight{
            color: rgb(125, 160, 230);
            font-size: 16px;
            cursor: pointer;
            }
        }
        .amusementCard{
            display: flex;
            justify-content: space-between;
            .leftCard{
                width: 49%;
                height: 20vh;
                overflow-y: hidden;
                display: flex;
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                    cursor: pointer;
                }
            }
            .rightCard{
                width: 49%;
                overflow-y: hidden;
                display: flex;
                .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                .introduce{
                    width: 60%;
                    height: 100%;
                    font-size: 16px;
                    color: rgb(85, 84, 84);
                    cursor: pointer;
                }
            }
        }
    }
    .moreCard{
        // height: 100vh;
        .moreCardHeader{
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            // .moreHeaderLeft{
            //     display: flex;
            //     justify-content: space-between

            // }
            .moreHeaderRight{
                font-size: 16px;
                color: rgb(125, 160, 230);
                cursor: pointer;
            }
        }
        .moreCardBody{
            .row{
                margin-bottom: 10px;
                height: 45vh;
                display: flex;
                justify-content: space-between;
                overflow-y: hidden;
                .item{
                    border: solid 3px rgb(211, 211, 211);
                    border-radius: 10px;
                    width: 49%;
                    display: flex;
                    overflow-y: hidden;
                    .picture{
                    display: flex;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                }
                    .introduce{
                        padding-left: 5px;
                        width: 55%;
                        height: 100%;
                        font-size: 16px;
                        color: rgb(85, 84, 84);
                        cursor: pointer;

                    }
                }
            }
        }
    }
    .detailName{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;

        }
        .detailConten{
            height: 100vh;
            overflow-y: auto;
            padding: 0 30px 20px 30px;
            font-size: 18px;
            color: rgb(97, 97, 97);
        }
}
</style>